<template>
  <div id="application-for-public-space-show">
    <div class="main-container container-fluid container-limited page-holder">
      <div class="page-title-holder flex content-space-between">
        <h2 class="page-title">申请公开的空间</h2>
        <el-button @click="goBack">后退</el-button>
      </div>
      <el-form :model="apply" label-width="80px" class="m-t-24 demo-table">
        <el-form-item label="空间名">
          <router-link :to="`/${$rp.SPACES}/${apply.product_id}`"
                       class="title link">{{ apply.product_title }}</router-link>
        </el-form-item>
        <el-form-item label="申请说明">
          {{ apply.content }}
        </el-form-item>
        <el-form-item label="申请状态">
          {{ applyStateCN }}
        </el-form-item>
        <el-form-item v-if="apply.reply" label="拒绝理由">
          {{ apply.reply }}
        </el-form-item>
        <template v-if="apply.state === 0 && $store.state.currentUser.admin">
          <el-form-item>
            <div class="flex">
              <div class="shrink-0">
                <el-button type="primary" @click="allowApply">通过申请</el-button>
                <el-button @click="closeApply">拒绝申请</el-button>
              </div>
              <el-input class="m-l-16" type="textarea" :autosize="{ minRows: 2 }"
                        placeholder="拒绝申请的理由" v-model="reply"/>
            </div>
          </el-form-item>
        </template>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApplicationForPublicSpacesShow', // 查看申请
  data() {
    return {
      apply: {}, // 这个申请的数据
      reply: '', // 拒绝申请时的回复
    };
  },
  computed: {
    applyId() { return this.$route.params.applyId; },
    // 申请状态
    applyStateCN() {
      switch (this.apply.state) {
        case 0: return '未处理';
        case 1: return '已通过';
        case 2: return '已拒绝';
        default: return '';
      }
    },
  },
  methods: {
    // 加载申请数据
    loadApply() {
      this.$api.applyingForPublicSpaces.show({ applyId: this.applyId })
        .then((res) => { this.apply = res.data; })
        .catch(() => {});
    },
    // 通过申请
    allowApply() {
      const msg = `<div>确认通过空间 <strong>${this.apply.product_title}</strong> 的公开申请吗？</div>`;
      this.$confirm(msg, '提示', {
        dangerouslyUseHTMLString: true,
        customClass: 'confirm-left',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => this.update({ state: 1 }))
        .catch(() => {});
    },
    // 拒绝申请
    closeApply() { this.update({ state: 2, reply: this.reply }); },
    // 更新申请
    update({ state, reply }) {
      this.$api.applyingForPublicSpaces.update({ applyId: this.applyId, state, reply })
        .then((res) => {
          this.$message.success('操作成功');
          this.$set(this, 'apply', res.data);
        })
        .catch(() => {});
    },
  },
  created() { this.loadApply(); },
  watch: {
    applyId() { this.loadApply(); },
  },
};
</script>

<style></style>
